<template>
  <view class="warehouse">
    <view class="u-skeleton">
      <view class="classifyfixd">
        <view class="bigTab">
          <view class="smlnavTab">
            <view class="smlactive"> 商品 </view>
          </view>
          <view class="showimg" @click="navigateTo('/pages/customer-service/index')">
            <image src="/src/static/images/kefu1.png" />
          </view>
        </view>
        <view class="navTab">
          <view
            :class="[activeTab === 'redeemed' && 'active']"
            key="redeemed"
            @click="activeTab = 'redeemed'"
          >
            所有商品
          </view>
          <view
            :class="[activeTab === 'pickedUp' && 'active']"
            key="pickedUp"
            @click="switchPickedUp"
          >
            我的奖品
          </view>
        </view>
      </view>
    </view>

    <view>
      <template v-if="activeTab === 'redeemed'">
        <view class="noshop" v-if="!prizeList.length">
          <view>
            <view class="sas_one">
              <image src="/src/static/images/sky.png" style="height: 146px" />
              <view class="sas_two">仓库空空如也~</view>
            </view>
          </view>
          <view class="gokh" @click="switchTab('/')">去开盒</view>
        </view>

        <view class="conent" v-else>
          <view class="shopevery clearfix" v-for="item in prizeList" :key="item.id">
            <view
              class="u-transition u-fade-enter-to u-fade-enter-active"
              style="transition-duration: 1000ms; transition-timing-function: ease-out"
            >
              <view
                class="u-image"
                style="
                  width: 120px;
                  height: 120px;
                  border-radius: 3px;
                  overflow: visible;
                  background-color: transparent;
                "
              >
                <image style="border-radius: 3px; width: 120px; height: 120px" :src="item.logo" />
              </view>
            </view>

            <view class="shop-right">
              <view class="shop-title"> {{ item.title }} </view>

              <view class="shop-price">
                <image :src="item.icon"   @error="imageError" />
                <text>市场价</text>

                <span style="text-decoration: line-through; margin-right: 10px"
                  >￥{{ item.market_price }}</span
                >
                <br />
                <image :src="item.icon" @error="imageError" />
                <text>{{ userStore.getConfig?.gold_name }}</text>
                ￥{{ item.discount_price }}
              </view>
              <view>
                <view class="statusbtn luckycoin" @click="handleBuy(item)"
                  >{{ userStore.getConfig?.gold_name }}兑换
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="noshop" v-if="!myPrizeList.length">
          <view>
            <view class="sas_one">
              <image src="/src/static/images/sky.png" style="height: 146px" />
              <view class="sas_two">仓库空空如也~</view>
            </view>
          </view>
          <view class="gokh" @click="switchTab('/')">去开盒</view>
        </view>

        <view class="conent" v-else>
          <view class="shopevery clearfix" v-for="item in myPrizeList" :key="item.prize.id">
            <view
              class="u-transition u-fade-enter-to u-fade-enter-active"
              style="transition-duration: 1000ms; transition-timing-function: ease-out"
            >
              <view
                class="u-image"
                style="
                  width: 120px;
                  height: 120px;
                  border-radius: 3px;
                  overflow: visible;
                  background-color: transparent;
                "
              >
                <image
                  style="border-radius: 3px; width: 120px; height: 120px"
                  :src="item.prize.logo"
                />
              </view>
            </view>

            <view class="shop-right">
              <view class="shop-title"> {{ item.prize.title }} </view>

              <view class="shop-price">
                <image :src="item.icon" />
                <text>市场价</text>
                <span style="text-decoration: line-through; margin-right: 10px"
                  >￥{{ item.prize.market_price }}</span
                >
                <br />
                <image :src="item.icon" />
                <text>{{ userStore.getConfig?.gold_name }}</text>
                ￥{{ item.prize.discount_price }}
              </view>
              <view class="exchange">
                <button
                  :style="{
                    background: item.delivery === 1 ? '#ccc' : '#fff',
                    border: item.delivery === 1 ? '1px solid #ccc' : '1px solid #ff392c',
                  }"
                  :disabled="item.delivery !== 0"
                  class="statusbtn luckycoin"
                  @click="handleBuy2(item)"
                >
                  {{
                    item.delivery == 0
                      ? '兑换' + userStore.getConfig?.gold_name
                      : item.delivery == 1
                      ? '兑换'
                      : '已兑换'
                  }}
                </button>
                <button
                  :style="{ background: item.delivery === 2 ? '#ccc' : '#fe5741' }"
                  :disabled="item.delivery == 2"
                  class="statusbtn nowancheng"
                  @click="item.delivery === 0 ? goAddress(item) : null"
                >
                  {{ item.delivery === 1 ? '已提货' : '提货' }}
                </button>
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>

    <u-popup :show="exchangeShow" mode="center">
      <view class="numbergoods_con">
        <view>需要</view>
        <view>{{ exchangeObj.discount_price + userStore.getConfig?.gold_name }}</view>
        <view class="clearfix">
          <view @click="exchangeShow = false">取消</view>
          <view @click="submit">确定</view>
        </view>
      </view>
    </u-popup>
    <u-popup :show="exchangeShow2" mode="center">
      <view class="numbergoods_con">
        <view>需要</view>
        <view>{{ exchangeObj2.prize.discount_price + userStore.getConfig?.gold_name }}</view>
        <view class="clearfix">
          <view @click="exchangeShow2 = false">取消</view>
          <view @click="submit2">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
  import { onShow } from '@dcloudio/uni-app';
  import { ref } from 'vue';
  import { getMyPrizeListApi, getPrizeListApi, buyPrizeApi, exchangePrizeApi } from '@/api/index';
  import { useUserStore } from '@/store/modules/user';

  const exchangeShow = ref(false);
  const activeTab = ref('redeemed');
  const prizeList = ref([]) as any;
  const myPrizeList = ref([]) as any;
  const userStore = useUserStore();
  const exchangeObj = ref<any>({ discount_price: '' });
  const exchangeObj2 = ref<any>({});
  const exchangeShow2 = ref(false);
  function navigateTo(url) {
    uni.navigateTo({
      url,
    });
  }

  function imageError(e){
    console.log("change icon")
    e.target.src = "/src/static/images/bd4206c06f4a1a9f9d91a77e9262af40.png"
  }
  function goAddress(item) {
    const objSteing = JSON.stringify(item);
    uni.navigateTo({
      url: `/pages/address-list/index?item=${encodeURIComponent(objSteing)}`,
    });
  }
  function switchTab(url) {
    uni.switchTab({ url });
  }

  function getPrizeList() {
    getPrizeListApi().then((res) => {
      prizeList.value = res.list;
    });
  }
  function handleBuy(value) {
    exchangeShow.value = true;
    exchangeObj.value = value;
  }
  function submit() {
    buyPrizeApi({ id: exchangeObj.value.id }).then(() => {
      exchangeShow.value = false;
      uni.showToast({
        title: '兑换成功',
        icon: 'success',
      });
      getPrizeList();
    });
  }
  function handleBuy2(value) {
    exchangeShow2.value = true;
    exchangeObj2.value = value;
  }
  function submit2() {
    exchangePrizeApi({ id: exchangeObj2.value.id }).then(() => {
      exchangeShow2.value = false;

      uni.showToast({
        title: '兑换成功',
        icon: 'success',
      });
      getMyPrizeListApi().then((res) => {
        myPrizeList.value = res;
      });
    });
  }
  function switchPickedUp() {
    if (!userStore.getToken) {
      uni.navigateTo({
        url: '/pages/login/index',
      });
    } else {
      activeTab.value = 'pickedUp';
      getMyPrizeListApi().then((res) => {
        myPrizeList.value = res;
      });
    }
  }
  onShow(() => {
    getPrizeList();
    switchPickedUp();
  });
</script>

<style lang="less">
  .warehouse {
    .classifyfixd {
      position: fixed;
      top: 0;
      width: 100%;
      background: #fff;
      z-index: 99;

      .bigTab {
        position: relative;
        height: 40px;
        line-height: 40px;

        .smlnavTab {
          display: flex;
          justify-content: center;

          uni-view {
            position: relative;
            margin-left: 43px;
            color: #b2afbb;
            font-weight: 800;

            &:first-of-type {
              margin-left: 0;
            }
          }

          .smlactive {
            color: #323232;
            font-size: 18px;

            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              width: 23px;
              height: 3px;
              background-color: #fe5741;
              left: 50%;
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
            }
          }
        }

        .showimg {
          position: absolute;
          right: 4%;
          top: 0;

          uni-image {
            width: 25px;
            height: 25px;
          }
        }
      }

      .navTab {
        display: flex;
        height: 40px;
        line-height: 40px;

        uni-view {
          position: relative;
          text-align: center;
          font-size: 14px;
          width: 58px;
          height: 25px;
          line-height: 25px;
          margin: 7px 0 0 15px;
          color: #b1afbb;
          border: 1px solid #fff;
        }

        .active {
          border: 1px solid #ff5e30;
          color: #ff5e30;
        }
      }
    }

    .conent {
      padding: 90px 0 60px;

      .shopevery {
        background: #fff;
        border-radius: 3px;
        margin: 10px 4% 0;
        padding: 10px;
        display: flex;

        .shop-right {
          float: left;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: calc(100% - 130px);
          height: 120px;
          margin-left: 10px;

          .shop-title {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-weight: 800;
          }

          .nowancheng {
            background: linear-gradient(0deg, #ff5525, #ff8361);
            color: #fff;
          }

          .shop-price {
            color: #ff392c;
            font-weight: 800;

            uni-image {
              width: 25px;
              height: 26px;
              margin: -1px 5px 0 0;
            }

            uni-text {
              font-size: 12px;
              color: #ff392c;
            }
          }

          .wancheng {
            background: #f8f8f8;
            color: #b1afbb;
          }

          .luckycoin {
            background-color: #fff;
            border: 1px solid #ff392c;
            color: #ff392c;
          }

          .exchange {
            display: flex;
            justify-content: space-between;

            .luckycoin {
              border: 1px solid #ff392c;
              color: #ff392c;
            }

            .nowancheng {
              background: linear-gradient(0deg, #ff5525, #ff8361);
              color: #fff;
            }

            > uni-view {
              width: 93px;
              box-sizing: border-box;
            }
          }

          .statusbtn {
            height: 35px;
            border-radius: 3px;
            font-size: 14px;
            text-align: center;
            line-height: 35px;
          }
        }

        > uni-image {
          float: left;
          width: 120px;
          height: 120px;
          border-radius: 3px;
        }
      }
    }

    .noshop {
      .gokh {
        width: 133px;
        height: 40px;
        background: linear-gradient(270deg, #ff8361, #ff5525);
        border-radius: 40px;
        color: #fff;
        text-align: center;
        line-height: 40px;
        margin: 24px auto 0;
      }

      .sas_one {
        text-align: center;
        padding-top: 170px;

        > uni-image {
          width: 60%;
        }

        .sas_two {
          margin-top: 14px;
          text-align: center;
          color: #b1afbb;
        }
      }
    }

    .numbergoods_con {
      width: 200px;
      background: #fff;
      border-radius: 10px;

      uni-view {
        text-align: center;
      }

      > uni-view:nth-of-type(1) {
        font-size: 12px;
        padding: 25px 0 5px;
      }

      > uni-view:nth-of-type(2) {
        font-size: 20px;
        font-weight: 800;
      }

      > uni-view:nth-of-type(3) {
        border-top: 1px solid #eee;
        margin-top: 25px;

        uni-view {
          float: left;
          width: 50%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          box-sizing: border-box;

          &:first-of-type {
            border-right: 1px solid #eee;
            color: #999;
          }
        }
      }
    }
  }

  .u-image {
    position: relative;
    transition: opacity 0.5s ease-in-out;
  }

  @media screen and (min-width: 1000px) and (max-width: 2520px) {
    .warehouse .classifyfixd {
      max-width: 390px;
      margin: 0 auto /* 居中对齐 */;
    }
  }

  :deep(.u-count-down) {
    .u-count-down__text {
      color: #ff392c !important;
    }
  }
</style>
